<template>
  <div id="chart-container"></div>
</template>

<script setup lang="ts">
import * as G2 from '@antv/g2';
import { onMounted } from 'vue';
import markerData from '@/data/marker.json';
onMounted(() => {
  const data = [
    { genre: 'Sports', sold: 275, "profit": 20 },
    { genre: 'Strategy', sold: 115, "profit": 20 },
    { genre: 'Action', sold: 120, "profit": 20 },
    { genre: 'Shooter', sold: 350, "profit": 20 },
    { genre: 'Other', sold: 150, "profit": 20 },
  ];

  const chart = new G2.Chart({
    container: 'chart-container',
    width: 200,
    height: 200,
  });

  // 添加柱状图表示销售额
  chart
    .interval() // 创建柱状图
    .data(data)
    .encode('x', 'genre')
    .encode('y', 'sold')
    .encode('color', () => '#5B8FF9');

  chart.render();
});
</script>

<style scoped>
#chart-container {
  width: 100%;
  height: 100%;
}
</style>
